<template>
  <div class="menu-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <ButtonGroup>
            <el-button
                v-permission="['sys:menu:add']"
                type="primary"
                icon="Plus"
                @click="handleAdd(null)"
            >新增</el-button>
          </ButtonGroup>
          <!-- 齿轮图标及下拉复选框 -->
          <el-dropdown trigger="hover">
            <div class="setting-icon-wrapper">
              <el-icon class="setting-icon">
                <Setting />
              </el-icon>
            </div>
            <template #dropdown>
              <div style="padding: 10px; width: 180px;">
                <el-checkbox-group v-model="checkedOptions">
                  <el-checkbox label="边框" />
                  <el-checkbox label="斑马纹" />
                  <el-checkbox label="表头背景" />
                </el-checkbox-group>
              </div>
            </template>
          </el-dropdown>
        </div>
      </template>

      <!-- 表格区域 -->
      <el-table
          v-loading="loading"
          :data="menuList"
          row-key="id"
          :border="checkedOptions.includes('边框')"
          :stripe="checkedOptions.includes('斑马纹')"
          :header-cell-style="getHeaderStyle"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="菜单名称" prop="title" show-overflow-tooltip />
        <el-table-column label="图标" align="center" width="80">
          <template #default="{ row }">
            <el-icon v-if="row.icon" :style="{ color: row.iconColor || '' }">
              <component :is="row.icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="80">
          <template #default="{ row }">
            <el-tag :type="row.type === MenuTypeEnum.CATALOG ? 'primary' : row.type === MenuTypeEnum.MENU ? 'success' : 'info'">
              {{ row.type === MenuTypeEnum.CATALOG ? '目录' : row.type === MenuTypeEnum.MENU ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="路由地址" prop="path" show-overflow-tooltip />
        <el-table-column label="组件路径" prop="component" show-overflow-tooltip />
        <el-table-column label="权限标识" prop="perm" show-overflow-tooltip />
        <el-table-column label="排序" prop="sort" width="60" align="center" />
        <el-table-column label="状态" align="center" width="80">
          <template #default="{ row }">
            <el-tag :type="row.hidden === 0 ? 'success' : 'info'">
              {{ row.hidden === 0 ? '显示' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="success" link @click="handleAdd(row)" v-permission="['sys:menu:add']">
              <el-icon><Plus /></el-icon>新增
            </el-button>
            <el-button type="primary" link @click="handleEdit(row)" v-permission="['sys:menu:update']">
              <el-icon><Edit /></el-icon>修改
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)" v-permission="['sys:menu:delete']">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogType === 'add' ? '新增菜单' : '修改菜单'"
        width="700px"
        append-to-body
    >
      <el-form
          ref="menuFormRef"
          :model="menuForm"
          :rules="rules"
          label-width="100px"
      >
        <el-row :gutter="20">
          <!-- 上级菜单 -->
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId">
              <el-tree-select
                  v-model="menuForm.parentId"
                  :data="menuOptions"
                  :props="{ label: 'title', value: 'id' }"
                  value-key="id"
                  placeholder="选择上级菜单"
                  check-strictly
                  :render-after-expand="false"
                  class="flex-grow"
              />
            </el-form-item>
          </el-col>

          <!-- 菜单类型 -->
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="menuForm.type" class="menu-type-group">
                <el-radio-button :value="MenuTypeEnum.CATALOG">目录</el-radio-button>
                <el-radio-button :value="MenuTypeEnum.MENU">菜单</el-radio-button>
                <el-radio-button :value="MenuTypeEnum.BUTTON">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 菜单名称 -->
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="title">
              <el-input v-model="menuForm.title" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>

          <!-- 排序 -->
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="menuForm.sort" :min="1" class="flex-grow" />
            </el-form-item>
          </el-col>

          <!-- 图标 -->
          <el-col :span="24" v-if="menuForm.type !== MenuTypeEnum.BUTTON">
            <el-form-item label="图标">
              <el-input v-model="menuForm.icon" placeholder="点击选择图标" readonly>
                <template #prefix>
                  <el-icon v-if="menuForm.icon" :style="{ color: menuForm.iconColor || '' }">
                    <component :is="menuForm.icon" />
                  </el-icon>
                </template>
                <template #append>
                  <el-button @click="showIconSelect = true">
                    <el-icon><View /></el-icon>选择图标
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 路由地址 -->
          <el-col :span="24" v-if="menuForm.type !== MenuTypeEnum.BUTTON">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="menuForm.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>

          <!-- 组件路径 -->
          <el-col :span="24" v-if="menuForm.type === MenuTypeEnum.MENU">
            <el-form-item label="页面路径" prop="component">
              <el-input v-model="menuForm.component" placeholder="/system/user/index">
                <template #prepend>src/views</template>
                <template #append>.vue</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 权限标识 -->
          <el-col :span="24" v-if="menuForm.type === MenuTypeEnum.BUTTON">
            <el-form-item label="权限标识" prop="perm">
              <el-input v-model="menuForm.perm" placeholder="请输入权限标识" />
            </el-form-item>
          </el-col>

          <!-- 状态 -->
          <el-col :span="12">
            <el-form-item label="状态" prop="hidden">
              <el-radio-group v-model="menuForm.hidden">
                <el-radio :value="0">显示</el-radio>
                <el-radio :value="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 是否外链 -->
          <el-col :span="12">
            <el-form-item label="是否外链" prop="isExternal">
              <el-radio-group v-model="menuForm.isExternal">
                <el-radio :value="0">否</el-radio>
                <el-radio :value="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图标选择器组件 -->
    <icon-select
        v-model="menuForm.icon"
        :color="menuForm.iconColor"
        @update:color="menuForm.iconColor = $event"
        v-model:visible="showIconSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import IconSelect from '@/components/IconSelect/index.vue'
import { getMenuListApi, createMenuApi, updateMenuApi, deleteMenuApi } from '@/api/system/menu'
import { MenuTypeEnum } from "@/enum/MenuTypeEnum";

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const menuFormRef = ref<FormInstance>()
const showIconSelect = ref(false)
const submitLoading = ref(false)

// 表单规则
const rules = {
  parentId: [{ required: true, message: '请选择父级菜单', trigger: 'blur' }],
  title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
  perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
  hidden: [{ required: true, message: '请选择状态', trigger: 'blur' }]
}

// 菜单表单
const menuForm = reactive<any>({
  id: undefined,
  parentId: 0,
  name: '',
  sort: 0,
  path: '',
  component: '',
  redirect: '',
  type: MenuTypeEnum.CATALOG,
  perms: '',
  icon: '',
  iconColor: '',  // 新增字段
  hidden: 0,
  isExternal: 0
})

const menuList = ref<any>([])
const menuOptions = ref<any>([])

const checkedOptions = ref<string[]>(['边框', '斑马纹', '表头背景'])

// 获取表头样式
const getHeaderStyle = () => {
  if (checkedOptions.value.includes('表头背景')) {
    return { backgroundColor: '#f5f7fa', color: '#333', fontWeight: 'bold' }
  }
  return {}
}
// 获取菜单列表
const getList = async () => {
  loading.value = true
  try {
    const { data } = await getMenuListApi()
    menuList.value = data
    menuOptions.value = [{ id: 0, title: '顶级菜单', children: data }]
  } catch (error) {}
  loading.value = false
}

// 新增或修改
const submitForm = async () => {
  if (!menuFormRef.value) return
  await menuFormRef.value.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const formData = { ...menuForm }
      if (dialogType.value === 'add') {
        await createMenuApi(formData)
        ElMessage.success('新增成功')
      } else {
        await updateMenuApi(formData)
        ElMessage.success('修改成功')
      }
      dialogVisible.value = false
      getList()
    } catch (error) {} finally {
      submitLoading.value = false
    }
  })
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除菜单"${row.title}"吗？`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      .then(async () => {
        try { await deleteMenuApi(row.id); ElMessage.success('删除成功'); getList() } catch {}
      }).catch(() => {})
}

// 新增菜单
const handleAdd = (row?: any) => {
  resetForm()
  if (row) menuForm.parentId = row.id
  dialogType.value = 'add'
  dialogVisible.value = true
}

// 修改菜单
const handleEdit = (row: any) => {
  resetForm()
  dialogType.value = 'edit'
  dialogVisible.value = true
  Object.assign(menuForm, { ...row })
}

// 重置表单
const resetForm = () => {
  menuForm.id = undefined
  menuForm.parentId = 0
  menuForm.name = ''
  menuForm.sort = 0
  menuForm.path = ''
  menuForm.redirect = ''
  menuForm.component = ''
  menuForm.type = MenuTypeEnum.CATALOG
  menuForm.perms = ''
  menuForm.icon = ''
  menuForm.iconColor = ''
  menuForm.hidden = 0
  menuForm.isExternal = 0
}

onMounted(() => { getList() })
</script>
<style scoped>

/* 齿轮图标外层容器 */
.setting-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f2f2f2; /* 灰色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 悬停效果 */
.setting-icon-wrapper:hover {
  background-color: #e0e0e0; /* 鼠标悬停变深一点 */
}

.setting-icon {
  color: #606266;
  font-size: 18px;
}
</style>
